<template>
  <ClientOnly>
    <p v-html="decodedDescription" />
    <div class="card-wrapper">
      <div class="card-examples">
        <component :is="formatPathDemos[path]" />
      </div>
      <div class="card-footer">
        <el-tooltip content="复制代码" :show-arrow="false" popper-class="popper-h">
          <el-icon :size="16" class="tooltip-margin" @click="copyCode">
            <svg
              preserveAspectRatio="xMidYMid meet"
              viewBox="0 0 24 24"
              width="1.2em"
              height="1.2em"
              data-v-65a7fb6c=""
            >
              <path
                fill="currentColor"
                d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
              ></path>
            </svg>
          </el-icon>
        </el-tooltip>
        <el-tooltip content="查看源代码" :show-arrow="false" popper-class="popper-h">
          <el-icon
            :size="16"
            class="tooltip-margin"
            @click="sourceVisible = !sourceVisible"
          >
            <svg
              preserveAspectRatio="xMidYMid meet"
              viewBox="0 0 24 24"
              width="1.2em"
              height="1.2em"
              data-v-65a7fb6c=""
            >
              <path
                fill="currentColor"
                d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
              ></path>
            </svg>
          </el-icon>
        </el-tooltip>
      </div>
      <Transition
        enter-active-class="animate__animated animate__lightSpeedInRight animate__fadeIn"
        leave-active-class="animate__animated animate__lightSpeedOutRight animate__fadeOut"
      >
        <div v-show="sourceVisible">
          <div class="language-vue" v-html="decoded" />
          <div class="example-float-control" @click="sourceVisible = false">
            <el-icon :size="16">
              <CaretTop />
            </el-icon>
            <span>隐藏源代码</span>
          </div>
        </div>
      </Transition>
    </div>
  </ClientOnly>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useClipboard } from "@vueuse/core";
import { CaretTop } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

let props = defineProps<{
  source: string;
  path: string;
  rawSource: string;
  description?: string;
}>();

const { copy, isSupported } = useClipboard({
  source: decodeURIComponent(props.rawSource),
  read: false,
});

let sourceVisible = ref<boolean>(false);
const demos: any = import.meta.glob("./../examples/**/*.vue", { eager: true });

const formatPathDemos = computed(() => {
  let demoObj = {};

  Object.keys(demos || {}).forEach((key) => {
    demoObj[key.replace("../examples/", "").replace(".vue", "")] = demos[key].default;
  });
  return demoObj;
});

const decodedDescription = computed(() => decodeURIComponent(props.description!));

const decoded = computed(() => {
  return decodeURIComponent(props.source);
});

const copyCode = async () => {
  if (!isSupported) {
    ElMessage.error("此浏览器不支持自动复制");
  }
  try {
    await copy();
    ElMessage.success("复制成功");
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};
</script>

<style lang="scss" scoped>
.language-vue {
  margin: 0 !important;
  border-radius: 0 !important;
}

.card-wrapper {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin: 0.5px;
  background-color: var(--bg-color);
}

.card-examples {
  padding: 1.5rem;
}

.card-footer {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 2.5rem;
  border-top: 1px solid var(--border-color);
}

.tooltip-margin {
  margin: 0 0.5rem;
  color: var(--text-color-lighter);
  transition: 0.2s;
  cursor: pointer;
}

.example-float-control {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-color);
  height: 44px;
  box-sizing: border-box;
  background-color: var(--bg-color, #fff);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: -1px;
  color: var(--el-text-color-secondary);
  cursor: pointer;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.example-float-control:hover {
  color: #409eff;
}
</style>
<style lang="scss">
.popper-h {
  background: var(--bg-popper) !important;
  color: var(--bg-popper-color) !important;
}
</style>
